<template>
    <view :class="cardClass" @click="tapReverse">
        <view class="content front c-flex_column c-align_center">
            <image class="avater row" :src="word.picture" mode="scaleToFill"></image>
            <view class="word row c-flex_row c-align_center c-justify_center">
                {{word.englishWord}}
            </view>
            <view class="translation row en">
                <view class="title">
                    {{word.englishTranslation}}
                </view>
            </view>
            <view class="play-button c-position_absolute" @click.stop="tapPlay">
                <view class="icon">
                    <uni-icons custom-prefix="iconfont" type='icon-e-bg-volume' size="24" color="#333"></uni-icons>
                </view>
            </view>
        </view>
        <view class="content back c-flex_column c-align_center">
            <view class="translation row cn">
                <view class="title">
                    {{word.chineseTranslation}}
                </view>
            </view>
            <view class="play-button c-position_absolute" @click.stop="tapPlay">
                <view class="icon">
                    <uni-icons custom-prefix="iconfont" type='icon-e-bg-volume' size="24" color="#333"></uni-icons>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getWordPlayVoicePath
    } from '../../../services/index.js';
    export default {
        props: {
            word: {
                type: Object,
                default: function() {
                    return {}
                }
            }
        },
        data: function() {
            return {
                isRoll: false
            }
        },
        computed: {
            cardClass: function() {
                return ['card', this.isRoll ? "card-reverse" : ""]
            },
        },
        methods: {
            tapReverse() {
                this.isRoll = !this.isRoll;
            },
            tapPlay() {
                getWordPlayVoicePath(this.word.englishWord).then(res => {
                    this.$emit("playWord", res)
                }).catch(() => {
                    uni.showToast({
                        title: `播放失败`,
                        icon: 'none'
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .card {
        width: 100%;
        height: 100%;
        perspective: 1000rpx;
        position: relative;

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .row {
                margin: 40rpx;
                margin-bottom: 0;
            }

            .row {
                margin-bottom: 40rpx;
            }

            .avater {
                width: 460rpx;
                height: 300rpx;
                border-radius: 15rpx;
                overflow: hidden;
            }

            .word {
                font-size: 46rpx;
                color: #333;
                font-weight: 800;
            }

            .translation {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                font-weight: 700;

                .icon {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    width: 50rpx;
                    height: 50rpx;
                }

            }

            .en {
                font-size: 32rpx;

                align-self: flex-start;

                .title::before {
                    content: "explain: ";
                    font-size: 22rpx;
                    color: #1890ff;
                }
            }

            .cn {
                font-size: 42rpx;

                .title::before {
                    content: "释义: ";
                    font-size: 36rpx;
                    color: #1890ff;
                }
            }

            .play-button {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                bottom: 30rpx;
                right: 30rpx;
                width: 120rpx;
                height: 120rpx;
                border-radius: 60rpx;
                background: #ffda17;


                .icon {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
    }

    .front {
        position: relative;
        background: #fff;
    }

    .back {
        background: #fff;
    }

    .card .front,
    .card .back {
        width: 100%;
        height: 100%;
        box-shadow: 0 0 20rpx #888;
        border-radius: 15rpx;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transition-duration: 0.5s;
        transition-timing-function: "ease-in";
    }

    .card .back {
        transform: rotateY(0deg);
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .card-reverse .front {
        transform: rotateY(-180deg);
        visibility: visible;
    }

    .card-reverse .back {
        transform: rotateY(-360deg);
        visibility: visible;
    }
</style>